Skip to main content

📋 Copy, Paste & Duplicate

Learn how to efficiently copy, paste, and duplicate elements in AppStruct. These fundamental operations help you build apps faster by reusing existing elements and maintaining consistency across your project.

Overview​

AppStruct provides multiple ways to copy and reuse elements:

  1. Copy & Paste - Standard clipboard operations for elements
  2. Duplicate - Quick element duplication with smart positioning
  3. Cross-Page Copying - Copy elements between different pages
  4. Browser Extension Integration - Import elements from external sources
  5. Smart Positioning - Automatic positioning to avoid overlaps

1. Copy & Paste Operations​

Desktop Copy & Paste

  • Copy: Select element(s) and press Ctrl+C (Windows) / Cmd+C (Mac)
  • Paste: Press Ctrl+V (Windows) / Cmd+V (Mac) in target location
  • Context Menu: Right-click selected elements and choose "Copy"

Mobile Copy & Paste

  • Copy: Use the copy button in element context menu or action panel
  • Paste: Right-click on canvas and select "Paste" option
  • Touch Gestures: Long-press for context menu access

What Gets Copied

  • Element Structure: Complete element including all properties
  • Styling: All visual styles and positioning
  • Content: Text, images, and other media
  • Actions: Workflow actions and interactions
  • Nested Elements: Child elements within groups or containers

2. Duplicate Functionality​

Smart Duplication

  • Single Element: Right-click and select "Duplicate"
  • Multiple Elements: Use multi-select and duplicate all at once
  • Keyboard Shortcut: Ctrl+D (Windows) / Cmd+D (Mac)

Automatic Positioning

  • Smart Offset: Duplicated elements automatically offset to avoid overlap
  • Horizontal Offset: New elements positioned to the right with 10px spacing
  • Overflow Handling: When reaching canvas edge, elements stack vertically
  • Percentage vs Pixels: Maintains original unit system (% or px)

Duplicate Behavior

  • New IDs: Each duplicate receives a unique identifier
  • Capitalized Names: Element names are automatically capitalized
  • Recursive Duplication: Groups and containers duplicate all child elements

3. Cross-Page Operations​

Between Pages

  • Copy from Source: Copy elements from any page in your project
  • Paste to Target: Navigate to target page and paste
  • Page Index Handling: Elements adapt to target page structure
  • Smart Animation Updates: Automatically updates smart animation references

Cross-Project Copying (Coming Soon)

  • Project to Project: Copy elements between different AppStruct projects
  • Template Sharing: Share element configurations as templates
  • Team Collaboration: Copy elements from team member projects

4. Browser Extension Integration​

External Element Import

  • Browser Extension: Install AppStruct browser extension
  • Capture Elements: Select elements from any website
  • Automatic Conversion: Elements converted to AppStruct components
  • Paste from Extension: Use "Paste from Extension" in context menu

Extension Features

  • Visual Selection: Click and drag to select webpage elements
  • Style Preservation: Maintains original styling where possible
  • Smart Component Mapping: Maps HTML elements to AppStruct components
  • Bulk Import: Import multiple elements simultaneously

5. Context Menu Operations​

Right-Click Menu

  • Copy: Copy selected element(s) to clipboard
  • Paste: Paste previously copied elements
  • Duplicate: Create immediate duplicate with smart positioning
  • Paste from Extension: Import elements captured via browser extension

Menu Availability

  • Element Context: Right-click on selected elements
  • Canvas Context: Right-click on empty canvas areas
  • Multi-Select: Operations work with multiple selected elements
  • Mobile Context: Touch-optimized context menus on mobile devices

6. Advanced Copy Features​

Batch Operations

  • Multi-Element Copy: Copy multiple selected elements as a group
  • Hierarchy Preservation: Maintains parent-child relationships
  • Group Integrity: Groups remain intact during copy operations
  • Smart Animation Elements: Properly handles animated components

Style Management

  • Adaptive Styles: Copies responsive design settings
  • Media Queries: Preserves device-specific styling
  • Custom Properties: Maintains custom CSS properties
  • Design System Links: Preserves connections to design system

7. Positioning Logic​

Smart Positioning Algorithm

1. Calculate original element width
2. Add element width + 10px offset to left position
3. Check if new position exceeds canvas boundaries
4. If overflow: reset to original left + small offset, move down vertically
5. Ensure minimum 70% visibility on canvas

Unit Handling

  • Pixel Units: Direct pixel calculations for positioning
  • Percentage Units: Proportional calculations relative to container
  • Mixed Units: Converts between units as needed for positioning
  • Container Boundaries: Respects parent container limits

8. Clipboard Management​

Internal Clipboard

  • AppStruct Clipboard: Dedicated clipboard for element data
  • Persistent Storage: Clipboard maintains data across sessions
  • Rich Data: Stores complete element structure and metadata
  • Multiple Items: Supports copying multiple elements simultaneously

System Integration

  • OS Clipboard: Integrates with system clipboard when possible
  • Cross-Application: Limited support for external application pasting
  • Data Format: Uses proprietary AppStruct element format

9. Mobile Optimizations​

Touch Interface

  • Large Buttons: Touch-friendly copy/paste buttons
  • Haptic Feedback: Vibration confirms copy/paste actions
  • Visual Feedback: Clear indicators for clipboard operations
  • Gesture Support: Swipe gestures for quick operations

Mobile-Specific Features

  • FAB Integration: Copy/paste options in floating action buttons
  • Panel Actions: Dedicated copy/paste panels for complex operations
  • Touch Context: Optimized context menus for touch interaction

Best Practices​

  • Organize First: Plan your layout before duplicating elements
  • Test Positioning: Verify element positions after paste operations
  • Use Templates: Create reusable templates instead of repeated copying
  • Clean Up IDs: Rename duplicated elements for better organization
  • Check Actions: Verify workflow actions work correctly after copying
  • Mobile Testing: Always test copy/paste behavior on mobile devices

Keyboard Shortcuts​

Desktop Shortcuts

  • Ctrl+C / Cmd+C: Copy selected elements
  • Ctrl+V / Cmd+V: Paste copied elements
  • Ctrl+D / Cmd+D: Duplicate selected elements
  • Ctrl+X / Cmd+X: Cut selected elements
  • Ctrl+Z / Cmd+Z: Undo copy/paste operations

Troubleshooting​

Common Issues

  • Paste Not Working: Ensure elements are copied first
  • Wrong Position: Check canvas zoom level and positioning units
  • Missing Elements: Verify source elements weren't deleted
  • Style Issues: Check if design system links are preserved
  • Performance: Large copy operations may take a few seconds

Need Assistance?​

If you encounter any challenges with copy, paste, or duplicate operations, please refer to the Documentation or contact our support team at [email protected].

Happy Building with AppStruct!